<template>
<div>
    <h2 style="text-align:center">用户理财明细</h2>
    <table class="table table-bordered">
        <thead>
            <tr style="background-color: aqua;">
                <td>用户登录账号</td>
                <td>理财产品名称</td>
                <td>年收益</td>
                <td>购买金额</td>
                <td>购买时间</td>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Info">
                <td>{{ item.UL_Name }}</td>
                <td>{{ item.F_Name }}</td>
                <td>{{ item.F_APY }}</td>
                <td>{{ item.UF_Money }}</td>
                <td>{{ item.UF_Date.substring(0,10) }}</td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import axios from 'axios';
import {ref,onMounted} from 'vue';

//创建路由数据对象实例
const route=useRoute();

//创建响应式数据
const Info=ref([{
    UL_Name:"",
    F_Name:"",
    F_APY:0,
    UF_Money:0,
    UF_Date:""
}])

//创建生命周期函数钩子
onMounted(()=>{
    LoadData()
})

const LoadData=()=>{
    axios.get("https://localhost:44321/api/Finans/ShowUserFinan",
        {
            params:{
                Fid:route.params.Fid
            }
        }
    )
    .then(res=>{
        console.log(res.data)
        Info.value=res.data
    })
}
</script>